<template lang="pug">
.activity_card
  dl
    dt
      strong {{model.title}}
      img(:src="model.picture",@click="$router.push({name: 'activity:detail', params: {id: model.id}})")
    dd(ref="boxWrapper")
      div
        ul
          li(v-for="(item, index) in model.childs",:key="index",@click="$router.push({name: 'sorts:detail', params: {id: item.id, aId: model.id}})")
            img(:src="item.icon")
            label {{item.title}}
            strong 价格: {{item.price}}
            strong 会员价: {{item.vip_price}}
  .cover(v-show="scrolling")
</template>

<script>
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      boxScroll: null,
      scrolling: false
    }
  },
  props: {
    model: {
      type: Object,
      default () {
        return {
          title: '水工专场',
          icon: this._.config['static_uri'] + '/images/23354.jpg',
          childs: [{}, {}, {}]
        }
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this._initScroll()
    })
  },
  methods: {
    _initScroll () {
      let liEl = this.$refs.boxWrapper.getElementsByTagName('li')
      this.$refs.boxWrapper.getElementsByTagName('div')[0].style['width'] = (liEl.length * (4.4 + 0.12)) + 'rem'
      if (!this.boxScroll) {
        this.$nextTick(() => {
          this.boxScroll = new BScroll(this.$refs.boxWrapper, {
            probeType: 1,
            click: false,
            scrollY: false,
            scrollX: true
          })
          this.boxScroll.on('scrollStart', () => {
            this.scrolling = true
          })
          this.boxScroll.on('scrollEnd', () => {
            this.scrolling = false
          })
        })
      } else {
        this.boxScroll.refresh()
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.activity_card
  .cover
    background: rgba(255, 255, 255, 0)
    width: 100%
    height: 100%
    position: absolute
    top: 0
    left: 0
    z-index: 1
  dt
    position: relative
    border-top: 1px solid #eee;
    strong
      width: 100%
      text-align: center
      display: inline-block
      padding: .1rem 0 .2rem 0
      color: #999
    img
      width: 100%
      background: #ccc
      height: 4rem
    &:after
      content: ''
      width: 0
      height: 0
      display: inline-block
      border-left: 0.4rem solid transparent
      border-right: 0.4rem solid transparent
      border-bottom: 0.5rem solid #fff
      position: absolute
      left: 50%
      margin-left: -0.4rem
      bottom: 0.08rem
  dd
    clear: both
    height: 4.9rem
    width: 100%
    overflow: hidden
    padding: .22rem 0
    ul
      height: 100%
      display: flex
    ul li
      list-style: none
      height: 100%
      margin: 0 .12rem
      text-align: center
      border: 1px solid #e3e3e3
      padding: .5rem 0
      box-shadow: 2px 2px 4px #ccc
      border-radius: .1rem
      box-sizing: border-box
      background: #fff
      img
        width: 2rem
        height: 2rem
        border-radius: .1rem
      label
        width: 100%
        clear: both
        font-size: .3rem
        float: left
        margin-top: .2rem
      strong
        width: 50%
        float: left
        font-weight: normal
        font-size: .2rem
        line-height: .5rem
        color: red
        text-align: center
</style>
